{% extends 'music_base.html' %}
{% load static %}
{% block title %}
首页
{% endblock %}

{% block head %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/music_index.css' %}">
<style>
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;

        background-image: url("{{ MEDIA_URL }}{{ user_profile.background_image }}");
        background-size: cover;
    }
</style>
{% endblock %}

{% block body %}
<div class="profile-container">

    <div class="lg-container">
        <div id="carousel-example-generic" class="carousel slide index-banner" data-ride="carousel">
            <!-- 指示器 -->
            <ol class="carousel-indicators">
                {% for hot in hots %}
                {% if loop.first %}
                <li data-target="#carousel-example-generic" data-slide-to="{{ loop.index0 }}" class="active"></li>
                {% else %}
                <li data-target="#carousel-example-generic" data-slide-to="{{ loop.index0 }}"></li>
                {% endif %}
                {% endfor %}
            </ol>
            <!-- 轮播图 -->
            <div class="carousel-inner" role="listbox" style="height: 500px">
                {% for hotmusic in hotmusics %}
                {% if forloop.first %}
                <div class="item active">
                    <a href="/music/detail/{{ hotmusic.music.id }}">
                        <img src="{{ hotmusic.music.cover_image.url }}" alt="">
                    </a>
                </div>
                {% else %}
                <div class="item">
                    <a href="/music/detail/{{ hotmusic.music.id }}">
                        <img src="{{ hotmusic.music.cover_image.url }}" alt="">
                    </a>
                </div>
                {% endif %}
                {% endfor %}

            </div>

            <!-- 左右切换的控制按钮 -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

        <div class="post-group">
            <ul class="post-group-head">
                <li class="active"><a href="#">热门音乐</a></li>
            </ul>
            <ul class="post-list-group">
                {% for hotmusic in hotmusics %}
                <li>
                    <div class="post-info-group">
                        <p class="post-title">
                            <a href="/music/detail/{{ hotmusic.music.id }}"
                                style="text-decoration: none; color:black">{{ hotmusic.music.music_name }}</a>
                        </p>
                        <p class="post-info">
                            <span>名称：{{ hotmusic.music.music_name }}</span>
                            <span>分类：{{ hotmusic.music.genre.genre_name }}</span>
                            <span>上架时间：{{ hotmusic.music.created_at }}</span>
                        </p>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="sm-container">
        <div class="list-group">
            {% for musicgenre in musicgenres %}
            <a href="/music/list/{{ musicgenre.id }}" class="list-group-item">{{ musicgenre.genre_name }}</a>
            {% endfor %}
        </div>
    </div>

</div>

{% endblock %}